<template>
  <div class="page">

        <!-- @click Vue框架 -->
        <button class="add" @click="add" @custom-event="fetchList">新增</button>

        <div class="content">

          <div class="table_container">
                <el-table
                border
                  :data="tableData">
                  <el-table-column
                    prop="productUrl"
                    label="产品图"
                    align="center">
                    <template slot-scope="scope">
                       <el-image
                            style="width: 60px; height: 60px"
                            :src="imageHost+scope.row.productUrl"
                            :preview-src-list="[imageHost + scope.row.productUrl]"
                              />
                    </template>
                  </el-table-column>

                  <el-table-column
                    prop="bgUrl"
                    label="背景图"
                    align="center">
                    <template slot-scope="scope">
                       <el-image
                            style="width: 60px; height: 60px"
                            :src="imageHost+scope.row.bgUrl"
                            :preview-src-list="[imageHost + scope.row.bgUrl]"
                              />
                    </template>
                  </el-table-column>

                  <el-table-column
                    align="center"
                    prop="title"
                    label="标题">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="titleEn"
                    label="标题英文">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="description"
                    label="描述">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="descriptionEn"
                    label="描述英文">
                  </el-table-column>

                  <!-- element UI  el-table组件怎么在点击某一行的按钮后获取某一行的实体数据 -->
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']">修改</el-button>
                      <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']">删除</el-button>
                    </template>
                  </el-table-column>
                  <!-- 删除   弹窗是否删除  确定后调接口   更新列表 -->

                </el-table>

          </div>

        </div>


        <AddBannerDialog @custom-event="fetchList" ref="addDialog"></AddBannerDialog>

        <!-- 使用子组件并监听自定义事件
        当父组件的 parentMessage 发生变化时，子组件也会相应地更新它的 message prop。 -->
        <UpdateBannerDialog :form="form"  @custom-event="fetchList" ref="updateDialog"></UpdateBannerDialog>

        <!-- <DeleteBannerDialog :formId="formId" @custom-event="fetchList" ref="deleteDialog"></DeleteBannerDialog> -->

        <DeleteDialog :formId="formId" @delete-event="onSubmitDelete" ref="deleteDialog"/>
  </div>

</template>

<script>

     // 引入js文件
    import { getBannerList,deleteAboutUsBanner} from '@/api/system/about_us_banner';
    import AddBannerDialog from './components/AddBannerDialog.vue'
    import UpdateBannerDialog from './components/UpdateBannerDialog.vue';
    import DeleteDialog from '@/components/DeleteDialog.vue';

    // 注册组件
    // import DeleteBannerDialog from './components/DeleteBannerDialog.vue';

    import { imageHost } from '@/api/ImageHost';

    export default{
      components:{
          AddBannerDialog,UpdateBannerDialog,DeleteDialog
      },
      data(){
        return{
          imageHost:'',
          tableData:[],
          form: {
              title: '',
              titleEn: '',
              description: '',
              descriptionEn: '',
              productUrl:'',
              bgUrl:'',
              id:-1
              // 要添加该字段，不然UpdateDialog接收不到该字段
              // fileType:''

          },
          formId:-1

        }
      },
      created(){
         this.imageHost = imageHost()
         this.fetchList();
      },

      methods:{
        add(){
           this.$refs['addDialog'].showDialog();

        },
        // row item数据
        handleUpdate(row){
          this.$refs['updateDialog'].showDialog();
          Object.assign(this.form, row);

        },
        handleDelete(row){
          this.$refs['deleteDialog'].showDialog();
          // 根据id 删除数据
          this.formId=row.id;
        },

        fetchList(){
          getBannerList().then(response => {
               this.tableData=response.data;
               this.total=response.total;
          });

        },

        handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
               // console.log(`当前页: ${val}`);
              this.params.pageNum=val;
              this.fetchList();
        },
        onSubmitDelete(data){
            deleteAboutUsBanner(data).then(response => {
              console.log(response);
              this.$refs['deleteDialog'].hideDialog();
              this.fetchList();

            });

          //     // this.$emit('custom-event', data); // 触发自定义事件，并传递数据给父组件
          //     this.$emit('custom-event');

        }


      }
    }
</script>

<style scoped>
  .page{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

  }

  .add{
    width: 60px;
    height: 30px;
    margin-left: 15px;
    margin-top: 15px;
    background-color:#409EFF;
    border:none;
    border-radius: 5px;
    color: #ffffff;

  }
  .image{
    width: 50px;
    height: 50px;
  }
  .content{
      width: 100%;
      height: 100%;
      margin-top: 20px;
      display: flex;
      flex-direction: row;
  }
  .activity{
      width: 200px;
      height: auto;

  }
  .activity_item{
      height: 45px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
  }
  .table_container{
      width: 100%;
      display: flex;
      flex-direction: column;

  }
  .pagination{
     align-self: flex-end;
     margin-top: 20px;
   }

</style>
